<script setup lang="ts">
import {defineEmits} from 'vue'
const emit = defineEmits(['change'])
const form = reactive({
  navIndex: 0,
  logData: {
    userPhone: '',
    userPaw: ''
  }
});
watch(() => form.logData ,() => {
  console.log(form.logData)
  emit('change',form.logData)
},{
  deep:true,
  immediate:true,
})
</script>

<template>
  <div class="panel-input">
    <div v-if="form.navIndex === 0">
      <div class="panel-input-item">
        <el-input
          v-model="form.logData.userPhone"
          placeholder="请输入手机号码"
          clearable
        />
      </div>
      <div>
        <el-input
          v-model="form.logData.userPaw"
          placeholder="请输入登录密码 "
          clearable
          show-password
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep .el-input__wrapper {
  box-shadow: unset !important;
  background: #f5f5f5;
  height: 45px !important;
  font-size: 16px !important;
  border-radius: 10px !important;
}

::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #189b9e !important;
  font-size: 20px!important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #189b9e !important;
  border-color: #189b9e !important;
  font-size: 20px!important;
}
.panel-input {
  .panel-input-item {
    margin: 20px 0;
  }
}
</style>
